var NavClass = React.createClass({
	render: function() {
		return (<div>
            {this.props.navs.map((el,index)=>{
                return (<button onClick={this.props.clk.bind(null,index)} className={this.props.index==index?"active":""} key={index}>{el}</button>)
            })}
            </div>);
	}
})
var ContentsClass = React.createClass({
	render: function() {
		return (<div>
            {this.props.contents.map((el, index)=>{
                return (<span  key={index} className={this.props.index==index?"active":""}>
                    {el}
                    </span>)
            })}
            </div>)
	}
});
var Tab = React.createClass({
	getInitialState: function() {
		return {
			index: 0
		};
	},
	handleClick: function(index) {
		console.log(this)
		this.setState({
			index: index
		})
	},
	render: function() {
		return (<div className="tabs">
                <NavClass ref="nav" clk={this.handleClick} index={this.state.index} navs={this.props.navs} />
                <ContentsClass ref="con" index={this.state.index} contents={this.props.contents} />
            </div>)
	}
});
var obj = {
	navs: ["a", "b", "c"],
	contents: ["内容a", "内容bbbbb", "内容ccccc"]
}

ReactDOM.render(
	<Tab navs={obj.navs}  contents={obj.contents}/>,
	document.getElementById('example')
);